import { Suspense, lazy } from 'react';
import { Navigate, Route, useLocation } from 'react-router-dom';
import home from './home'
import login from './login'
import auth from '../utils/auth'
import Login from '../components/ivform/login';
type RouteType = {
  path: string;
  element: any;
  children?: RouteType[]
  pathUrl?: string
  meta?: any
}

const arr = [
  ...home,
  ...login,
  {
    path: '*',
    redirect:'/login',
    element: () => import('../view/404/404'),
  },
  // 重定向 默认为login
  {
    path: '/',
    element: <Navigate to='/login' />
  },
  {
    path: '/505',
    element: () => import('./a'),
  }
]
// 获取路由 使arr里面的element属性变为ReactDOM
function getRouteDom(loginArr: RouteType[]): RouteType[] {

  const DomArr: any[] = []

  function threeList(loginArr) {
    for (let val of loginArr) {
      if(val.path ==='/') {
        DomArr.push(val)
      }else  {
        const Compent = lazy(val.element);
        const Dom = { ...val, element: <Compent></Compent>, pathUrl: val.path }
        if (val.children) {
          getChildren(val.children, val.path)
        }
        DomArr.push(Dom)
      } 
    }
  }
  threeList(loginArr)
  return DomArr
}
function lazyLoad(children){
  return   <Suspense fallback={<Login></Login>}>
      {children}
</Suspense>
}
function getChildren(children: RouteType[], path: string) {
  // eslint-disable-next-line array-callback-return
  return children.map(val => {
    const Compent = lazy(val.element);
    val.element = lazyLoad(<Compent></Compent>)
    val.pathUrl = path + '/' + val.path
  })
}

export default getRouteDom(arr)